<template>
  <div class="contractForm">
    <el-form
      :inline="true"
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      label-width="100px"
      :show-message="false"
      class="el-form--inline contractForm">
      <el-form-item
        label="甲方"
      >
        <el-input
          v-model="ruleForm.user"
          placeholder="甲方"/>
      </el-form-item>
      <el-form-item label="乙方">
        <el-input
          v-model="ruleForm.user"
          placeholder="乙方"/>
      </el-form-item>
      <el-form-item label="乙方培训">
        <el-input
          v-model="ruleForm.user"
          placeholder="乙方培训"/>
      </el-form-item>
      <el-form-item label="签约编号">
        <el-input
          v-model="ruleForm.user"
          placeholder="签约编号"/>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input
          v-model="ruleForm.user"
          placeholder="创建时间"/>
      </el-form-item>
      <el-form-item label="签订时间">
        <el-input
          v-model="ruleForm.user"
          placeholder="签订时间"/>
      </el-form-item>
      <el-form-item label="有效期限">
        <el-input
          disabled
          v-model="ruleForm.user"
          placeholder="有效期限"/>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input
          v-model="ruleForm.user"
          placeholder="创建时间"/>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-input
          v-model="ruleForm.user"
          placeholder="订单状态"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="ruleForm.user"
          placeholder="备注"/>
      </el-form-item>
      <el-form-item label="合同类型">
        <el-input
          v-model="ruleForm.user"
          placeholder="合同类型"/>
      </el-form-item>
      <el-form-item label="商业模式">
        <el-input
          v-model="ruleForm.user"
          placeholder="商业模式"/>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
export default {
  name: 'ContractForm',
  data () {
    return {
      ruleForm: {
        user: ''
      },
      rules: {
        name: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        user: [
          { type: 'date', required: true, message: '请输入', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style lang="less">
  .contractForm {
    .el-form-item {
      margin-right: 16px;
    }

    .el-input__inner {
      border-radius: 0 !important;
      height: 34px;
      line-height: 34px;
      width: 210px;
    }

    .el-form-item__label {
      padding-right: 10px;
    }

    .el-date-editor.el-input,
    .el-input__inner {
      width: 210px;
    }
  }
</style>
